<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% block title %}工具箱{% endblock %}</title>
    <!-- 引入Tailwind CSS -->
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <!-- 引入Font Awesome 5 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
    {% block extra_css %}{% endblock %}
</head>
<body class="bg-gray-50 min-h-screen">
    <!-- 导航栏 -->
    <nav class="bg-white shadow-md">
        <div class="container mx-auto px-4">
            <div class="flex justify-between items-center py-3">
                <div class="flex items-center space-x-4">
                    <a href="{{ url_for('main.index') }}" class="flex items-center space-x-2">
                        <i class="fas fa-tools text-blue-600 text-2xl"></i>
                        <span class="font-bold text-xl text-blue-600">工具箱</span>
                    </a>
                </div>
                
                <div class="w-1/3">
                    <div class="relative">
                        <form action="{{ url_for('main.search') }}" method="GET">
                            <input type="text" name="q" placeholder="搜索工具..." class="w-full py-2 px-4 bg-gray-100 rounded-full focus:outline-none focus:ring-2 focus:ring-blue-500 focus:bg-white">
                            <button type="submit" class="absolute right-0 top-0 mt-2 mr-4 text-gray-500">
                                <i class="fas fa-search"></i>
                            </button>
                        </form>
                    </div>
                </div>
                
                <div class="flex items-center space-x-4">
                    <a href="#" class="text-gray-600 hover:text-blue-600">
                        <i class="far fa-star mr-1"></i>收藏
                    </a>
                    <a href="#" class="text-gray-600 hover:text-blue-600">
                        <i class="far fa-clock mr-1"></i>历史
                    </a>
                    <a href="#" class="flex items-center text-gray-600 hover:text-blue-600">
                        <i class="far fa-user-circle text-2xl"></i>
                    </a>
                </div>
            </div>
        </div>
    </nav>

    <!-- 工具分类菜单栏 -->
    <div class="bg-gray-100 shadow-sm">
        <div class="container mx-auto px-4">
            <div class="flex flex-wrap items-center py-2">
                <a href="{{ url_for('text_tools.index') }}" class="px-4 py-2 rounded-lg hover:bg-blue-100 text-gray-700 font-medium flex items-center space-x-1 transition-colors">
                    <i class="fas fa-font text-blue-600"></i>
                    <span>文本工具</span>
                </a>
                <a href="{{ url_for('image_tools.index') }}" class="px-4 py-2 rounded-lg hover:bg-blue-100 text-gray-700 font-medium flex items-center space-x-1 transition-colors">
                    <i class="fas fa-image text-green-600"></i>
                    <span>图片工具</span>
                </a>
                <a href="{{ url_for('dev_tools.index') }}" class="px-4 py-2 rounded-lg hover:bg-blue-100 text-gray-700 font-medium flex items-center space-x-1 transition-colors">
                    <i class="fas fa-code text-purple-600"></i>
                    <span>开发工具</span>
                </a>
                <a href="{{ url_for('converter_tools.index') }}" class="px-4 py-2 rounded-lg hover:bg-blue-100 text-gray-700 font-medium flex items-center space-x-1 transition-colors">
                    <i class="fas fa-calculator text-yellow-600"></i>
                    <span>数据转换</span>
                </a>
                <a href="{{ url_for('file_tools.index') }}" class="px-4 py-2 rounded-lg hover:bg-blue-100 text-gray-700 font-medium flex items-center space-x-1 transition-colors">
                    <i class="fas fa-file-pdf text-red-600"></i>
                    <span>文件转换</span>
                </a>
                <a href="{{ url_for('life_tools.index') }}" class="px-4 py-2 rounded-lg hover:bg-blue-100 text-gray-700 font-medium flex items-center space-x-1 transition-colors">
                    <i class="fas fa-heart text-pink-600"></i>
                    <span>生活工具</span>
                </a>
            </div>
        </div>
    </div>

    <!-- 页面内容 -->
    {% block content %}{% endblock %}

    <!-- 页脚 -->
    <footer class="bg-gray-800 text-white py-10 {% block footer_classes %}mt-12{% endblock %}">
        <div class="container mx-auto px-4">
            <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
                <div>
                    <h3 class="text-lg font-bold mb-4">关于我们</h3>
                    <p class="text-gray-400">工具箱是一个提供各种在线工具的平台，旨在为用户提供便捷、高效的在线工具服务。</p>
                </div>
                
                <div>
                    <h3 class="text-lg font-bold mb-4">热门工具</h3>
                    <ul class="space-y-2 text-gray-400">
                        <li><a href="{{ url_for('image_tools.image_compress') }}" class="hover:text-white">图片压缩</a></li>
                        <li><a href="{{ url_for('dev_tools.json_formatter') }}" class="hover:text-white">JSON格式化</a></li>
                        <li><a href="{{ url_for('text_tools.text_converter') }}" class="hover:text-white">文本转换器</a></li>
                        <li><a href="{{ url_for('converter_tools.unit_converter') }}" class="hover:text-white">单位换算</a></li>
                    </ul>
                </div>
                
                <div>
                    <h3 class="text-lg font-bold mb-4">常用链接</h3>
                    <ul class="space-y-2 text-gray-400">
                        <li><a href="#" class="hover:text-white">使用指南</a></li>
                        <li><a href="#" class="hover:text-white">用户协议</a></li>
                        <li><a href="#" class="hover:text-white">隐私政策</a></li>
                        <li><a href="#" class="hover:text-white">联系我们</a></li>
                    </ul>
                </div>
                
                <div>
                    <h3 class="text-lg font-bold mb-4">关注我们</h3>
                    <div class="flex space-x-4">
                        <a href="#" class="text-gray-400 hover:text-white text-xl">
                            <i class="fab fa-weixin"></i>
                        </a>
                        <a href="#" class="text-gray-400 hover:text-white text-xl">
                            <i class="fab fa-weibo"></i>
                        </a>
                        <a href="#" class="text-gray-400 hover:text-white text-xl">
                            <i class="fab fa-github"></i>
                        </a>
                        <a href="#" class="text-gray-400 hover:text-white text-xl">
                            <i class="fab fa-twitter"></i>
                        </a>
                    </div>
                </div>
            </div>
            
            <div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400">
                <p>© 2023 工具箱 版权所有</p>
            </div>
        </div>
    </footer>
    
    {% block scripts %}{% endblock %}
</body>
</html> 